<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable max-len -->
<template >
    <div class="layout">
      <el-container>
        <el-header>
          <button @click="denglu">登录</button>
        </el-header>
          <el-main class="el1">
            <el-container>
              <el-aside>
                <!-- 菜单 -->
                <el-menu>
                  <el-menu-item :index="item.url" @click="menuClick" v-for="item of mesun" :key="item.name">{{item.name}} </el-menu-item>
                </el-menu>
              </el-aside>
              <el-main>
                <router-view/>
              </el-main>
            </el-container>
          </el-main>
      </el-container>
    </div>
</template>

<script>
import memu from '@/router/memu';

export default {
  name: 'layoutView',
  data() {
    return {
      mesun: memu,
    };
  },
  methods: {
    goto(URL) {
      this.$router.push(URL);
    },
    menuClick(res) {
      this.$router.push(res.index);
    },
    denglu() {
      this.$router.push('/long');
    },
  },
};
</script>
<style lang="scss" scoped>

.layout{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-aside{
  width: 200px;
}
.el1{
  padding-left: 0px;
  padding-bottom: 0px;
}
.el-main .el-container{
  height: 100%;
}
.el-aside,.el-menu{
  background-color: rgb(228, 224, 224);
}
</style>
